<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">标段</span>
      <el-select
        class="inline-input"
        size="medium"
        v-model="bidSection"
        clearable
        placeholder="请选择"
        @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select class="inline-input" size="medium" v-model="areaId" clearable placeholder="请选择">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">员工</span>
      <el-input class="inline-input" size="medium" v-model="staff" clearable placeholder="请输入" />

      <span class="txt">考勤状态</span>
      <el-select class="inline-input" size="medium" v-model="check_state" clearable placeholder="请选择">
        <el-option v-for="item in checkState" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <span class="txt">考勤日期</span>
      <el-date-picker
        v-model="timeMonth"
        style="width: 120px;"
        type="month"
        size="medium"
        value-format="yyyy-MM"
        placeholder="请选择月份"
        @change="toChangeMonth"
        @focus="isShowDate = false" />
      <span style="position: relative;">
          <el-input
            v-model="timeDay"
            size="medium"
            clearable
            style="width: 100px; margin-left: 6px;  margin-right: 40px"
            placeholder="请选择日"
            @focus="isShowDate = true"
            @change="changeTimeDay" />
          <ul class="date-select" v-show="isShowDate" @click='calendarSelect'>
            <li>1</li><li>2</li><li>3</li>
            <li>4</li><li>5</li><li>6</li>
            <li>7</li><li>8</li><li>9</li>
            <li>10</li><li>11</li><li>12</li>
            <li>13</li><li>14</li><li>15</li>
            <li>16</li><li>17</li><li>18</li>
            <li>19</li><li>20</li><li>21</li>
            <li>22</li><li>23</li><li>24</li>
            <li>25</li><li>26</li><li>27</li><li>28</li>
            <li v-show="isShowNum29">29</li>
            <li v-show="isShowNum30">30</li>
            <li v-show="isShowNum31">31</li>
          </ul>
        </span>

      <el-button type="primary" size="medium" icon="el-icon-search" @click="queryListData">查询</el-button>
    </form>

    <TableModel :table-data="checkStatisticList" :loading="loading">
      <el-table-column prop="fullname" label="员工姓名"></el-table-column>
      <el-table-column prop="username" label="ID"></el-table-column>
      <el-table-column prop="bidSectionName" label="标段"></el-table-column>
      <el-table-column prop="workNames" label="所属工区"></el-table-column>
      <el-table-column prop="depname" label="所属组织"></el-table-column>
      <el-table-column prop="name" label="所属班组"></el-table-column>
      <el-table-column prop="checkState" label="考勤状态"></el-table-column>
      <el-table-column prop="checkType" label="考勤类型"></el-table-column>
      <el-table-column prop="registerdate" label="考勤时间"></el-table-column>
    </TableModel>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData" />
  </div>
</template>

<script>
import Pagination from "../Pagination";
import HttpInterface from "../../../util/httpInterface";
import Constants from "../../../util/constants";
import PublicMethods from "../../../util/PublicMethods";
import TableModel from "../../models/TableModel";
import { mapActions, mapState } from "vuex";

export default {
	name: "CheckStatistic",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      isShowDate: false,
      checkStatisticList: [],
      staff: "",
      timeMonth: "",
      timeDay: "",
      organization: [],
      areaId: "",
      workAreaInfo: [],
      check_state: "",
      checkState: Constants.CHECK_STATE,
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      isShowNum29: true,
      isShowNum30: true,
      isShowNum31: true,
      bidSection: "",
    };
	},

  computed: {
    ...mapState(["biaoduanList"])
  },

	created() {
    let timestamp = Date.now();
    let time = PublicMethods.formatDate(timestamp, 'yyyy-mm-dd');
    let timeArr = time.split('-');
    this.timeMonth = timeArr[0] + "-" + timeArr[1];
    this.timeDay = timeArr[2];
  },

  mounted() {
    this.getTendersInfo();
  },

  methods: {
    ...mapActions(["getTendersInfo", "selectByBidSection"]),

    getWorkAreaList() {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.bidSection,
        fn: function (data) {
          _this.workAreaInfo = data;
        }
      })
    },

    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getCheckStatisticList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getCheckStatisticList();
    },

    toChangeMonth () {
      if (this.timeMonth) {
        let dateArr = this.timeMonth.split('-');
        let y = new Date(dateArr[0]).getFullYear(); // 获取指定年份
        let m = new Date(dateArr[1]).getMonth() + 1;   // 获取指定月份
        let d = new Date(y, m, 0).getDate();   // 获取指定 年份 的 月份 的 天数
        switch(d) {
          case 29:
            this.isShowNum29 = true;
            this.isShowNum30 = false;
            this.isShowNum31 = false;
            break;
          case 30:
            this.isShowNum29 = true;
            this.isShowNum30 = true;
            this.isShowNum31 = false;
            break;
          case 31:
            this.isShowNum29 = true;
            this.isShowNum30 = true;
            this.isShowNum31 = true;
            break;
        }
      }
    },

    // 验证输入是不是两位数数字
    changeTimeDay() {
      var teg = /^[0-9]{1,2}$/;
      if (this.timeDay && !teg.test(this.timeDay)) {
        this.errorMessage('请选择日期！');
      }
    },

    // 选择日
    calendarSelect(e) {
      if (!this.timeMonth) {
        this.errorMessage('请选择月份！');
        return;
      }
      var e = e || window.event,
          target = e.target || e.srcElement,
          li = target.parentElement.children;

      if (target.nodeName.toLowerCase() === 'li') {
        for (let i = 0; i < li.length; i ++) {
          li[i].className = "";
        }
        target.classList.add('active');

        if (target.innerHTML.length == 1) {
          this.timeDay = "0" + target.innerHTML;
          this.isShowDate = false;
        } else {
          this.timeDay = target.innerHTML;
          this.isShowDate = false;
        }
      }
    },

    // 获取数据
    getCheckStatisticList () {
      this.loading = true;
      let _this = this;
      var params = {
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
        type: 2,  // 日
        starttime: this.timeMonth + "-" + this.timeDay
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYREGISTER_LIST, params, function (response) {
        var { code, data, total } = response.data;
        if (code == "0000") {
          for (var i = 0; i < data.length; i ++) {
            data[i].checkState = Constants.CHECK_STATE_LIST[data[i].regflag];
            data[i].checkType = Constants.CHECK_TYPE_LIST[data[i].inoffflag];
            data[i].registerdate = data[i].registerdate.slice(0, 19)
          }
          _this.pageData.total = total;
          _this.checkStatisticList = data;
        } else {
          _this.errorMessage('获取数据失败！');
        }
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage('获取数据失败！');
      })
    },

    // 查询数据
    queryListData () {
      this.loading = true;
      let _this = this;
      var params = {
        pageSize: this.pageData.pageSize,
        pageNum: this.pageData.pageNum,
        realname: this.staff,
        regflag: this.check_state,
        areaId: this.areaId,
        bidSection: this.bidSection
      }
      if (this.timeMonth && this.timeDay) {
        params.type = 2;  // 日
        params.starttime = `${this.timeMonth}-${this.timeDay}`;
      } else {
        params.type = 1;  // 月
        params.starttime = this.timeMonth;
      }
      HttpInterface.requestGet(this, HttpInterface.URL_DUTYREGISTER_LIST, params, function (response) {
        var { code, data, total } = response.data;
        if (code == "0000") {
          for (var i = 0; i < data.length; i ++) {
            data[i].checkState = Constants.CHECK_STATE_LIST[data[i].regflag];
            data[i].checkType = Constants.CHECK_TYPE_LIST[data[i].inoffflag];
            data[i].registerdate = data[i].registerdate.slice(0, 19);
          }
          _this.pageData.total = total;
          _this.checkStatisticList = data;
        } else {
          _this.errorMessage('获取数据失败！');
        }
        _this.loading = false;
      }, function (err) {
        _this.loading = false;
        _this.errorMessage('获取数据失败！');
      })
    }
  }
};
</script>

<style  scoped lang='scss'>
.content-item{
  height: calc(100vh - 60px);
}

.condition_query{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt{
  margin-right: 10px;
  font-size: 14px;
}

.inline-input{
  width: 150px;
  margin-right: 22px;
}

.el-input--suffix >>> .el-input__inner{
  padding-right: 0 !important;
}

.date-select {
  width: 322px;
  display: flex;
  flex-wrap: wrap;
  color: #606266;
  border: 1px solid #e4e7ed;
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
  background: #fff;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  top: 44px;
  z-index: 333;

  li{
    width: 24px;
    height: 24px;
    display: inline-block;
    text-align: center;
    line-height: 24px;
    margin: 10px 11px;
    box-sizing: border-box;
    font-size: 12px;
    color: #606266;
    cursor: pointer;

    &:hover{
      color: #409eff;
    }

    &.active{
      color: #fff;
      font-weight: 700;
      background: #409eff;
      border-radius: 50%;
    }
  }
}
</style>
